<script setup>
const props = defineProps({
  text: {
    type: String,
    default: '分隔线'
  },
  // 文本对齐方式：left, center, right
  align: {
    type: String,
    default: 'left',
    validator: (v) => ['left', 'center', 'right'].includes(v)
  },
  // 文本距离左侧的偏移量（向右浮动的距离）
  leftOffset: {
    type: String,
    default: '0px'
  },
  // 文本距离右侧的偏移量（向左浮动的距离）
  rightOffset: {
    type: String,
    default: '0px'
  },
  lineColor: {
    type: String,
    default: '#e5e7eb'
  },
  textColor: {
    type: String,
    default: '#6b7280'
  },
  textSize: {
    type: String,
    default: '14px'
  },
  lineWidth: {
    type: String,
    default: '1px'
  },
  lineStyle: {
    type: String,
    default: 'solid',
    validator: (v) => ['solid', 'dashed', 'dotted', 'double'].includes(v)
  },
  // 文本左右的留白（避免文字与线条重叠）
  textPadding: {
    type: String,
    default: '12px'
  },
  // 背景色（用于覆盖线条，使文本清晰显示）
  bgColor: {
    type: String,
    default: '#ffffff'
  }
})
</script>

<template>
  <div class="relative w-full">
    <!-- 底层分割线（占满整个宽度，无偏移） -->
    <div class="absolute w-full" :style="{
      borderTop: `${lineWidth} ${lineStyle} ${lineColor}`,
      borderTopWidth: lineStyle === 'double' ? '3px' : lineWidth,
      top: '50%', // 垂直居中
      transform: 'translateY(-50%)'
    }"></div>

    <!-- 上层文本（可偏移，不影响下划线） -->
    <div class="relative z-10 inline-block" :style="{
      color: textColor,
      fontSize: textSize,
      backgroundColor: bgColor,
      paddingLeft: textPadding,
      paddingRight: textPadding,
      left: align === 'left' ? leftOffset : 'auto',
      right: align === 'right' ? rightOffset : 'auto',
      transform: align === 'center' ? 'translateX(-50%)' : 'none',
      left: align === 'center' ? '50%' : (align === 'left' ? leftOffset : 'auto')
    }">
      {{ text }}
    </div>
  </div>
</template>

<style scoped>
div {
  box-sizing: border-box;
}
</style>
